﻿*,
::after,
::before {
  box-sizing: border-box;
}
/* ---------- 页面元素定义样式 --------- */
a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-style: normal;
  font-family: inherit;
  text-decoration: none;
  -webkit-text-size-adjust: none;
  -ms-interpolation-mode: bicubic;
}
strong {
  font-weight: 600;
}

/* html {
  font-size: 62.5%;
} */
@media only screen and (max-width: 958px) {
  @media only screen and (max-width: 360px) {
    html {
      font-size: 81.25% !important; /** 13px */
    }
  }
  @media only screen and (min-width: 361px) {
    html {
      font-size: 70.31% !important;
    }
  }
  @media only screen and (min-width: 376px) {
    html {
      font-size: 73.24% !important;
    }
  }
  @media only screen and (min-width: 481px) {
    html {
      font-size: 94% !important; /* 15.04÷16=94% */
    }
  }
  @media only screen and (min-width: 561px) {
    html {
      font-size: 109% !important; /* 17.44÷16=109% */
    }
  }
  @media only screen and (min-width: 641px) {
    html {
      font-size: 125% !important; /* 20÷16=125% */
    }
  }
}
body,
html {
  height: 100%;
}
:focus {
  outline: 0;
}
ol,
ul {
  list-style: none;
}
textarea {
  resize: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
template {
  display: none;
  visibility: hidden;
}
caption,
td,
th {
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  line-height: 1.1em;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
pre {
  white-space: pre-wrap;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="password"] {
  font-family: inherit;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
img {
  max-width: 100%;
  border: 0;
}

/*================== 基础样式 ===================*/

:root,
page {
  /** 0.8 = 16/20,因基础字体为20px */
  /** 引文次要信息,12px */
  --text-xs-size: calc(0.75rem);
  /** 正文和正文标题 14px/16px */
  --text-sm-size: calc(0.875rem);
  --text-base-size: calc(1rem);
  /** 标题,使用粗体,18px/20px/24px/30px */
  --text-lg-size: calc(1.125rem);
  --text-xl-size: calc(1.25rem);
  --text-2xl-size: calc(1.5rem);
  --text-3xl-size: calc(1.875rem);

  /** 颜色变量 */
  --primary-color: rgb(0, 0, 255); /* 蓝色blue */
  --secondnary-color: #6185ff; /* 红色red */
  --background-color: #f6f7f8; /** 背景颜色 */

  /** 全局原角大小 */
  --border-radius: 0.4rem;
}
*,
page * {
  box-sizing: border-box;
  /** 平滑滚动*/
  scroll-behavior: smooth;
}
body,
page {
  /** 字体默认加粗 */
  font-weight: 400;
}

/** 容器 */
.container {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

.hidden {
  display: none !important;
}
/** text */
.text-primary {
  color: var(--primary-color);
}
.text-secondnary {
  color: var(--secondnary-color);
}
.text-gray {
  color: #707070;
}
.text-green {
  color: #0a0;
}
.text-blue {
  color: #00f;
}
.text-red {
  color: rgb(217, 0, 0);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-amount {
  font-weight: 500;
}

.text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-xs {
  font-size: var(--text-xs-size);
  line-height: 1rem; /* 16px */
}
.text-sm {
  font-size: var(--text-sm-size);
  line-height: 1.25rem; /* 20px */
}
.text-base,
.text-md {
  font-size: var(--text-base-size);
  line-height: 1.5rem; /* 24px */
}
.text-lg {
  font-size: var(--text-lg-size);
  line-height: 1.75rem; /* 28px */
}
.text-xl {
  font-size: var(--text-xl-size);
  line-height: 1.75rem; /* 28px */
}
.text-2xl {
  font-size: var(--text-2xl-size);
  line-height: 2.25rem; /* 28 / 36px */
}
.text-3xl {
  font-size: var(--text-3xl-size);
  line-height: 2.5rem; /* 36 / 40px */
}

/** 字体粗细 */
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-bold {
  font-weight: 700;
}

/** 边距 */
.margin-vert {
  margin-top: 1em;
  margin-bottom: 1em;
}
.margin-hori {
  margin-left: 1rem;
  margin-right: 1rem;
}
.margin-all {
  margin: 1em;
}
.margin-bottom {
  margin-bottom: 1em;
}

.padding-xs {
  padding-top: 0.25em;
}

/** 圆角 */
.radius-x-1 {
  border-radius: 0.25rem;
  overflow: hidden;
}
.radius-x-2 {
  border-radius: 0.5rem;
}
.radius-x-3 {
  border-radius: 0.75rem;
  overflow: hidden;
}
.radius-x-4 {
  border-radius: 1rem;
}
.radius-x-5 {
  border-radius: 1.25rem;
}

/** 指定位置 */
.pos-relative {
  position: relative;
}
.pos-absolute {
  position: absolute;
}
.pos-fixed {
  position: fixed;
}

.margin-reset-top {
  margin-top: 0 !important;
}
.margin-reset-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.margin-reset-col {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.margin-x-1 {
  margin: 0.25rem;
}
.margin-x-2 {
  margin: 0.5rem;
}
.margin-x-3 {
  margin: 0.75rem;
}
.margin-x-4 {
  margin: 1rem;
}
.margin-x-5 {
  margin: 1.25rem;
}
.margin-x-6 {
  margin: 1.5rem;
}
.margin-x-8 {
  margin: 2rem;
}
.margin-x-10 {
  margin: 2.5rem;
}
.margin-bx-1 {
  margin-bottom: 0.25rem;
}
.margin-bx-2 {
  margin-bottom: 0.5rem;
}
.margin-bx-3 {
  margin-bottom: 0.75rem;
}
.margin-bx-4 {
  margin-bottom: 1rem;
}
.margin-bx-5 {
  margin-bottom: 1.25rem;
}
.margin-bx-6 {
  margin-bottom: 1.5rem;
}
.margin-bx-8 {
  margin-bottom: 2rem;
}
.padding-reset-top {
  padding-top: 0 !important;
}
.padding-reset-bottom {
  padding-bottom: 0 !important;
}
.padding-reset-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.padding-reset-col {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.padding-x-1 {
  padding: 0.25rem;
}
.padding-x-2 {
  padding: 0.5rem;
}
.padding-x-3 {
  padding: 0.75rem;
}
.padding-x-4 {
  padding: 1rem;
}
.padding-x-5 {
  padding: 1.25rem;
}
.padding-x-6 {
  padding: 1.5rem;
}
.padding-x-8 {
  padding: 2rem;
}
.padding-x-10 {
  padding: 2.5rem;
}
.padding-lx-1 {
  padding-left: 0.25rem;
}
.padding-lx-2 {
  padding-left: 0.5rem;
}
.padding-lx-3 {
  padding-left: 0.75rem;
}
.padding-lx-4 {
  padding-left: 1rem;
}
.padding-lx-5 {
  padding-left: 1.25rem;
}
.padding-lx-6 {
  padding-left: 1.5rem;
}
.padding-lx-8 {
  padding-left: 2rem;
}

.padding-bx-1 {
  padding-bottom: 0.25rem;
}
.padding-bx-2 {
  padding-bottom: 0.5rem;
}
.padding-bx-3 {
  padding-bottom: 0.75rem;
}
.padding-bx-4 {
  padding-bottom: 1rem;
}
.padding-bx-5 {
  padding-bottom: 1.25rem;
}
.padding-bx-6 {
  padding-bottom: 1.5rem;
}
.padding-bx-8 {
  padding-bottom: 2rem;
}

/** 高度100% */
.height-all {
  height: 100%;
}
/** flex布局 */
.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-flow: column nowrap !important;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

.justify-center {
  justify-content: center;
}
.justify-self-end {
  justify-self: flex-end;
}
.justify-self-between {
  justify-self: space-between;
}
.justify-self-around {
  justify-self: space-around;
}
.justify-self-center {
  justify-self: center;
}
.align-start {
  align-self: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-baseline {
  align-items: baseline;
}

.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex-b-1_2 {
  flex-basis: 50%;
}
.flex-b-1_3 {
  flex-basis: 33.3333333333%;
}
.flex-b-1_4 {
  flex-basis: 25%;
}
.column-gap-5 {
  column-gap: 5%;
}
.gap {
  row-gap: 0.5rem;
  column-gap: 0.5rem;
}
.gap-x-1 {
  row-gap: 0.25rem;
  column-gap: 0.25rem;
}
.gap-x-2 {
  row-gap: 0.5rem;
  column-gap: 0.5rem;
}
.gap-x-3 {
  row-gap: 0.75rem;
  column-gap: 0.75rem;
}
.gap-x-4 {
  row-gap: 1rem;
  column-gap: 1rem;
}
.gap-x-5 {
  row-gap: 1.25rem;
  column-gap: 1.25rem;
}
.gap-x-8 {
  row-gap: 2rem;
  column-gap: 2rem;
}

/** 背景覆盖 */
.bg-cover {
  background-size: cover !important;
}

.bg-white {
  background: #fff;
}
.reset-bg {
  background: none !important;
}
.reset-padding {
  padding: 0 !important;
}
/** 文本显示一行 */
.row-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/** 分割线 */
.divider {
  border-bottom: solid 1px #ddd;
  margin-bottom: 15px;
}

/** 阴影 */
.shadow-after::after {
  content: " ";
  height: 15px;
  display: block;
  position: sticky;
  bottom: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.shadow-before::before {
  content: " ";
  height: 15px;
  display: block;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

.shadow-top {
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

.shadow-bottom {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/** 头像 */
.portrait {
  border-radius: 50rem;
}

.img-fit {
  /** 图片比例自适应 */
  position: relative;
  flex: 1;
  overflow: hidden;

  &::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
  }
  img,
  .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

  &.img-fit-75 {
    &::before {
      padding-top: 75%;
    }
  }
  &.img-fit-65 {
    &::before {
      padding-top: 65%;
    }
  }
  &.img-fit-50 {
    &::before {
      padding-top: 50%;
    }
  }
  &.img-fit-25 {
    &::before {
      padding-top: 25%;
    }
  }
}

/* =============== 旧版本实现 ===================*/

/* Response Layout, 12 Columns */
.container,
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 100%;
  min-height: 1px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  .hidden-sm {
    display: none !important;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    flex: 0 0 41.666666%;
    max-width: 41.666666%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    flex: 0 0 91.666666%;
    max-width: 91.666666%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666666%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666666%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666666%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666666%;
  }
  /*.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left}*/
}
@media (min-width: 992px) {
  .container {
    width: 900px;
  }
  .hidden-md {
    display: none !important;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666666%;
    max-width: 41.666666%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666666%;
    max-width: 91.666666%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666666%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666666%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666666%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666666%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
  .hidden-lg {
    display: none !important;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666666%;
    max-width: 41.666666%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666666%;
    max-width: 91.666666%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666666%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666666%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666666%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666666%;
  }
}

/** 575px */
@media (max-width: 575px) {
  .hidden-xs {
    display: none !important;
  }
  /* xs */
  .col-xs-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xs-2 {
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
  }
  .col-xs-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xs-5 {
    flex: 0 0 41.666666%;
    max-width: 41.666666%;
  }
  .col-xs-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xs-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xs-8 {
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .col-xs-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xs-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xs-11 {
    flex: 0 0 91.666666%;
    max-width: 91.666666%;
  }
  .col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-xs-1 {
    margin-left: 8.333333%;
  }
  .offset-xs-2 {
    margin-left: 16.666666%;
  }
  .offset-xs-3 {
    margin-left: 25%;
  }
  .offset-xs-4 {
    margin-left: 33.333333%;
  }
  .offset-xs-5 {
    margin-left: 41.666666%;
  }
  .offset-xs-6 {
    margin-left: 50%;
  }
  .offset-xs-7 {
    margin-left: 58.333333%;
  }
  .offset-xs-8 {
    margin-left: 66.666666%;
  }
  .offset-xs-9 {
    margin-left: 75%;
  }
  .offset-xs-10 {
    margin-left: 83.333333%;
  }
  .offset-xs-11 {
    margin-left: 91.666666%;
  }
}
.pull {
  float: left;
}
.push {
  float: right;
}

/* 隐藏 */
.hidden {
  display: none !important;
}
/* clearfix 清除浮动 */
.container:after,
.container-fluid:after,
.clearfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}
.clearfix {
  zoom: 1;
}
/* 大写 */
.g-uppercase {
  text-transform: uppercase;
}
/** 遮盖层 */
.g-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.3;
  z-index: -1;
}

/* 显示单行，超出以省略号显示 */
.g-single-row {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/** 文字居中 */
.g-text-center {
  text-align: center;
}
.g-text-right {
  text-align: right;
}
/* 元素垂直居中 */
.g-align-center {
  align-content: center !important;
  align-items: center !important;
}
/** 内容右对齐 */
.g-align-right {
  display: flex;
  justify-content: flex-end;
}
/** 元素垂直居中 */
.g-align-middle * {
  vertical-align: middle;
}
/* g-flex-boxes div垂直水平居中 */
.g-flex {
  display: flex;
}
.g-flex-boxes > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
/** 背景覆盖 */
.g-bg-cover {
  background-size: cover !important;
}
/** 隐藏滚动条 */
.g-hidden-bar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}
.g-hidden-bar::-webkit-scrollbar {
  width: 0; /** 兼容chrome */
}

@media (max-width: 768px) {
  .wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 圆角按钮 */
.g-circle-button,
.g-circle-fill-button {
  border: solid 2px #2699fb;
  line-height: 30px;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  padding: 0 15px;
  border-radius: 30px;
  user-select: none;
}
.g-circle-button:hover,
.g-circle-button-on,
.g-circle-button-on:hover {
  background: #fff;
  color: #2699fb !important;
}
.g-circle-button-small {
  line-height: 24px;
  font-size: 12px;
}

.g-circle-fill-button {
  background: #2699fb;
  color: #fff !important;
}
.g-circle-fill-button:hover {
  background: #fff;
  color: #2699fbf8 !important;
  transition: all 0.3s;
}
.g-circle-button:hover,
.g-circle-fill-button:hover {
  text-decoration: none !important;
}

/* 气泡 */
.g-pop {
  position: relative;
  background: #ffe;
  border-radius: 10px;
  color: #000;
  padding: 10px;
}
.g-pop-left,
.g-pop-right,
.g-pop-top,
.g-pop-bottom {
  position: absolute;
  margin: 0 auto;
  width: 0;
  height: 0;
  border: solid 10px transparent;
}
.g-pop .g-pop-left,
.g-pop .g-pop-right {
  top: calc(50% - 10px);
}
.g-pop .g-pop-top,
.g-pop .g-pop-bottom {
  left: 0;
  right: 0;
}
.g-pop .g-pop-top {
  top: -10px;
  border-bottom-color: #ffe;
  border-top: 0;
}
.g-pop .g-pop-bottom {
  bottom: -10px;
  border-top-color: #ffe;
  border-bottom: 0;
}
.g-pop .g-pop-left {
  left: -10px;
  border-right-color: #ffe;
  border-left: 0;
}
.g-pop .g-pop-right {
  right: -10px;
  border-left-color: #ffe;
  border-right: 0;
}
.g-pop-dark {
  background: #333;
  color: #fff;
}
.g-pop-dark .g-pop-left {
  border-right-color: #333;
}
.g-pop-dark .g-pop-right {
  border-left-color: #333;
}
.g-pop-dark .g-pop-top {
  border-bottom-color: #333;
}
.g-pop-dark .g-pop-bottom {
  border-top-color: #333;
}

/* 播放器，配合video.js使用*/
.mod-player {
  position: relative;
}
.mod-player-mark,
.mod-player-mask {
  position: absolute;
  top: 0;
  right: 0;
}
.mod-player-mask {
  left: 0;
  bottom: 30px;
  background: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
  z-index: 1;
}
.mod-player-mark {
  color: #fff;
  font-size: 10px;
  right: 1em;
  height: 1em;
  z-index: 2;
}
.mod-player .vjs-poster {
  z-index: 3;
}
.mod-player .vjs-big-play-button {
  z-index: 4;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto;
}

/* player button  */
.mod-play-box {
  position: relative;
}
.mod-play-box .mask,
.mod-play-box .play {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mod-play-box .mask {
  background: #000;
  opacity: 0.05;
}
.mod-play-box .play {
  width: 60px;
  height: 60px;
  border: solid 5px #eee;
  border-radius: 99em;
  z-index: 3;
  text-align: center;
}
.mod-play-box .play i {
  width: 0;
  height: 0;
  display: inline-block;
  border-top: solid 12px transparent;
  border-bottom: solid 12px transparent;
  border-left: solid 16px #eee;
  margin: 12px 0 0 4px;
}

/* 图片自动适应宽高，padding高度100%以宽度为准计算的 */
/* .g-suited-img.g-suited-img-75>.mask+img */
.g-suited-img {
  padding-bottom: 65%;
  position: relative;
  overflow: hidden;
}
.g-suited-img > img,
.g-suited-img .mask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
}
.g-suited-img .mask {
  z-index: 1;
}

/* big-title */
.g-big-tit {
  font-size: var(--text-lg-size);
  margin: 30px 0;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
}
.g-big-tit .sub {
  font-size: var(--text-base-size);
  margin: 15px 0;
  color: #666;
  line-height: 1.5em;
}
/* 输入框 */
.g-text-box {
  border: solid 1px #c0c0c0;
  line-height: 1.5em;
  padding: 0.5em 0.7em;
  border-radius: 3px;
}
.g-text-box:focus {
  outline: solid 1.4px #2699fb;
  outline-offset: -1.4px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* g-btn */
.g-btn {
  color: #fff;
  background: #06c;
  text-align: center;
  display: block;
  padding: 0 1.5em;
  border-radius: 3px;
  cursor: default;
  line-height: 30px;
  opacity: 0.85;
  filter: alpha(opacity=85);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  border: 0;
}
.g-btn:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.g-btn a:link,
.g-btn a:visited,
.g-btn button,
.g-btn input {
  display: block;
  color: #fff;
}
.g-btn a:hover {
  color: #fff;
  text-decoration: none;
}
/* g-btn-inline */
.g-btn-inline {
  display: inline-block;
  padding: 0 12px;
}
/* g-btn-a */
.g-btn-a {
  display: inline-block;
  line-height: 2em;
  padding: 0 25px;
  color: #fff;
  background: #2d83da;
  margin-right: 5px;
}
.g-btn-a:hover {
  color: #fff;
  background: #06c;
}
/* g-btn-div */
.g-btn-div {
  cursor: default;
  display: inline-block;
  line-height: 2em;
  padding: 0 25px;
  color: #fff;
  background: #2d83da;
  margin-right: 5px;
  margin-bottom: 0;
}
.g-btn-div:hover {
  color: #fff;
  background: #06c;
}
.g-btn-div a {
  display: block;
}
.g-btn-div:hover,
.g-btn-a:hover,
.g-btn a:hover {
  text-decoration: none;
}

/* 项目符号 */
.g-item-dot {
  width: 3px;
  height: 3px;
  margin: 10px 5px 0 0;
  background: #000;
  display: inline-block;
}

/* mod-n-form 表单 */
/*.mod-form>(.field>label.label{label$}+(.col>input.text.g-text-box+br+i.desc{请填写内容}))*3*/
.g-form-i {
  border: solid 1px #dadada;
  padding: 0 5px;
  font-size: 1em;
  overflow: hidden;
  line-height: 30px;
  height: 30px;
  border-radius: 5px;
}
.mod-form * {
  vertical-align: middle;
}
.mod-form .group {
  margin-bottom: 2em;
  border: solid 0 #ddd;
  background: #fff;
}
.mod-form .title {
  line-height: 2em;
  padding: 1em;
  font-size: 1.2em;
  color: #888;
}
.mod-form .field {
  padding: 0 0 15px 0;
}
.mod-form .field div,
.mod-form .field p {
  display: inline-block;
}
.mod-form .label {
  margin-right: 15px;
}
/* 表单字段 */
.mod-form-field {
  align-content: flex-start;
  display: flex;
}

/* g-tab-card / 选项卡 */
.g-tab-card {
  position: relative;
}
.g-tab-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.g-tab-card .tab {
  float: left;
  position: relative;
  text-align: center;
}
.g-tab-card .frame {
  clear: both;
  display: none;
}
.g-tab-card .active {
  display: inherit;
}
.g-tab-card .frame:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
.g-tab-card .mask {
  position: absolute;
  left: 1px;
  top: 0;
  background: #f5f5f5;
  opacity: 0.7;
  filter: alpha(opacity=70);
  z-index: 898;
}

/* g-btn-upload */
.g-btn-upload {
  position: relative;
  background: #f0f0f0;
  border: solid 1px #ccc;
  display: inline-block;
  line-height: 25px;
}
.g-btn-upload:hover {
  border-color: #888;
}
.g-btn-upload button {
  border: none;
}

/* g-table / 表格*/
.g-table,
.g-table table {
  width: 100%;
  border-collapse: collapse;
  line-height: 30px;
}
.g-table td {
  padding-left: 12px;
  margin-right: -12px;
}
.g-table td div {
  padding: 5px 0;
}
.g-table thead {
  background: #ebebeb;
  line-height: 350%;
  border: solid 1px #ebebeb;
}
.g-table thead td {
  font-weight: bold;
  color: #666;
}
.g-table tbody {
  border: solid 1px #ebebeb;
  border-top-width: 0;
}
.g-table tbody td {
  border-bottom: solid 1px #ebebeb;
}
.g-table .td-op {
  color: #ccc;
}
.g-table .td-op a {
  color: #06c;
}
.g-table .td-op a:hover {
  color: #000;
}

/* g-ani-hover-border : 鼠标滑过底框效果 */
.g-ani-hover-border {
  position: relative;
}
.g-ani-hover-border:after {
  content: " ";
  border-bottom: solid 2px transparent;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
}
.g-ani-hover-border:hover:after {
  border-bottom: solid 2px #000;
  transition: all 0.3s;
  width: 100%;
}
